<template>
  <div
    class="product-list w-240px h-292px rounded-4px"
    :class="{ 'hvr-float-shadow': false }"
    @mouseover="() => (enter = true)"
    @mouseout="() => (enter = false)"
  >
    <div
      class="w-full h-160px flex justify-center items-center bg-white cursor-pointer relative"
      style="border-radius: 4px 4px 0 0"
      @click="godetail"
    >
      <img class="w-full h-full" style="border-radius: 4px 4px 0 0" :src="img" alt="" />
      <div
        v-if="tagName"
        class="flex bg-mask-6 w-94px h-27px items-center absolute top-0 left-0"
        style="border-radius: 4px 0"
      >
        <div class="ml-8px"><img :src="tagIcon" alt="" /></div>
        <div class="text-white text-14px mr-4px">{{ tagName }}</div>
      </div>
      <!-- <div
        v-if="video && canPlay"
        class="absolute left-[50%] top-[50%] cursor z-10"
        style="transform: translate(-50%, -50%)"
        @click="play"
      >
        <img :src="listPlay" alt="" />
      </div>
      <div class="absolute left-0 top-0 z-9 rounded-t-4px">
        <video
          ref="videoAction"
          :src="video"
          :controls="controls"
          controlslist="nodownload"
          class="rounded-t-4px"
          disablePictureInPicture
          style="width: 240px; height: 160px; background: #fff"
          :poster="img"
        ></video>
      </div> -->
    </div>
    <div class="relative pl-11px" style="background: #25272d">
      <n-ellipsis
        style="max-width: 220px; font-size: 16px; color: #fff; cursor: pointer; margin-top: 10px"
      >
        {{ title }}
        <!-- <p class="text-16px text-white pt-10px cursor-pointer" @click="godetail">{{ title }}</p> -->
      </n-ellipsis>
      <div class="flex mt-6px text-12px overflow-scroll">
        <div
          v-for="label in labels"
          :key="label"
          class="rounded-2px px-4px mr-8px h-18px leading-18px"
          style="
            background-color: rgba(218, 191, 50, 0.15);
            color: rgba(255, 237, 143, 0.8);
            flex-shrink: 0;
          "
        >
          {{ label }}
        </div>
      </div>
      <div class="flex mt-7px text-12px" style="color: rgba(255, 255, 255, 0.6)">
        <div v-if="score" class="mr-6px">评分{{ score }}</div>
        <div v-if="score" class="mr-6px">|</div>
        <div>已售{{ sales }}</div>
      </div>
      <div class="flex items-end mt-11px pb-17px">
        <div class="text-14px text-white">￥</div>
        <div class="text-20px text-white">{{ price }}</div>
        <div
          v-if="discountPrice"
          class="text-12px ml-8px line-through"
          style="color: rgba(255, 255, 255, 0.6)"
        >
          ￥{{ discountPrice }}
        </div>
      </div>
      <div
        class="absolute bg-main rounded-100px text-white text-center text-14px leading-24px right-10px bottom-16px w-62px h-24px cursor-pointer"
        @click="$emit('on-select')"
      >
        选规格
        <div
          v-if="selectedNumber"
          class="absolute bg-badge w-18px h-18px leading-18px text-center rounded-[50%] text-12px text-white -top-8px -right-6px"
        >
          {{ selectedNumber }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import listPlay from '@renderer/assets/listPlay.svg'
import { useCartStore } from '@renderer/store/modules/cart'
export default defineComponent({
  name: 'ProductList',
  props: {
    id: Number,
    title: String,
    score: {
      type: Number,
      required: false
    },
    sales: {
      type: Number,
      required: true
    },
    price: {
      type: Number,
      required: true
    },
    discountPrice: {
      type: Number,
      required: false
    },
    labels: {
      type: Array as PropType<string[]>,
      default: () => []
    },
    img: {
      type: String,
      required: true
    },
    video: {
      type: String,
      required: false
    },
    isCombo: {
      type: [Number],
      default: 0
    },
    tagIcon: {
      type: String,
      required: false
    },
    tagName: {
      type: String,
      required: false
    }
  },
  emits: ['on-add', 'on-remove', 'on-select'],
  setup(props) {
    const videoAction = ref<HTMLVideoElement | null>(null)
    const canPlay = ref<boolean>(false)
    const controls = ref<boolean>(false)
    const videoRef = ref<HTMLVideoElement | null>(null)
    const addNumber = ref<number>(0)
    const cartNumber = ref<number>(1)
    const router = useRouter()
    const cart = useCartStore()

    const selectedNumber = computed(() => {
      const selectedSkus = props.isCombo == 0 ? cart.getSelectedSkus : cart.getSelectedComboSkus
      const sku =
        props.isCombo == 0
          ? selectedSkus.find((sku) => sku.spu_id === props.id)
          : selectedSkus.find((sku) => sku.id === props.id)
      return sku ? sku.number : 0
    })
    const godetail = () => {
      router.push({ name: 'Detail', params: { id: props.id }, query: { combo: props.isCombo } })
    }
    const enter = ref<boolean>(false)

    const play = () => {
      canPlay.value = false
      const video = videoAction.value as HTMLVideoElement
      controls.value = true
      video.volume = 0.5
      video.play()
    }
    return {
      ...props,
      videoRef,
      addNumber,
      cartNumber,
      enter,
      godetail,
      canPlay,
      listPlay,
      play,
      controls,
      videoAction,
      selectedNumber
    }
  }
})
</script>

<style scoped></style>
